<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/echarts/dist/echarts.js"></script>
    <script src="node_modules/echarts-wordcloud/dist/echarts-wordcloud.min.js"></script>
    <style>
        #main{width:500px;height:200px;border:solid 1px #F00;}
    </style>

</head>
<body>

<div id="main"></div>    <script>
    var chart = echarts.init(document.getElementById('main'));
    var colorArr=['#246892','#2c84c7','#009be3','#07b9fe','#24cdff','#4adeff','#6ff6f5'];
    chart.setOption({
                    title: {
                        show: false,
                        text: '折线图堆叠'
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function(para) {
                            return "<div style='padding: 10px'>" +
                                "<div>" + para[0].name + "</div>" +
                                "<div style='margin-top: 5px'>" + para[0].seriesName + ": <span style='color: rgb(0, 220, 169); margin-left: 5px;'>" + para[0].value + "</span>" +
                                "</div>" +
                                "</div>";
                        }
                    },
                    legend: {
                        show: false
                    },
                    // dataZoom: {
                    //     show: true,
                    //     realtime: false
                    // },
                    grid: {
                        left: 70,
                        right: 90,
                        bottom: 20,
                        top: 100,
                        containLabel: true
                    },
                    toolbox: {
                        right: 20,
                        feature: {
                            brush: {
                                type: ['lineX', 'clear'],
                                title: {
                                    lineX: "时间选择"
                                }
                            }
                        }
                    },
                    brush: {
                        xAxisIndex: 'all',
                        brushLink: 'all',
                        throttleType: "debounce",
                        throttleDelay: 500
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: "rgb(222, 222, 222)"
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: 'rgb(144, 155, 178)'
                            }
                        },
                        data: []
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: "dashed"
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: 'rgb(144, 155, 178)'
                            }
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    series: [{
                        name: '转载数',
                        type: 'line',
                        showSymbol: false,
                        itemStyle: {
                            normal: {
                                color: 'rgb(191, 230, 251)'
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(26, 161, 229, 0.6)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(255, 255, 255, 0)'
                                }])
                            }
                        },
                        data: [ {"name":"2017-05-03 00:00:00","value":0},{"name":"2017-05-04 00:00:00","value":0},{"name":"2017-05-05 00:00:00","value":0},{"name":"2017-05-06 00:00:00","value":0},{"name":"2017-05-07 00:00:00","value":0},{"name":"2017-05-08 00:00:00","value":0},{"name":"2017-05-09 00:00:00","value":205}]
                    }]
                });
</script>
</body>
</html>